<template>
	<view class="stu-details">
		<view class="stu-bg">
			<image class="page-bg" src="/static/user/bg.png" mode="widthFix"></image>
			<uni-nav-bar dark left-icon="left" :fixed="true" title="" :border="false" background-color="transparent" color="#22242A" @clickLeft="utils.goBack()" />
			<view class="name-head">
				<view class="left">
					<view class="avatar-head">
						<image class="head" :src="utils.headImage(studentInfo)" mode="aspectFill" @click="viewImage(utils.headImage(studentInfo))"></image>
					</view>
					<view class="name-student-no">
						<text class="name">{{studentInfo.name}}</text>
					</view>
				</view>
				<view>
					<image v-if="userInfo.accountId!=stuAccountId" class="xiaoxi" @click="chatPage(studentInfo)" src="/static/stu/ssjl.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="st-content">
			<view class="info">
				<view class="number">
					<view class="num-item" @click="pointsDetails()">
						<text class="num">{{studentInfo.zScore}}</text>
						<text class="name">积分</text>
					</view>
					<view class="num-item" @click="recommendAaa()">
						<text class="num">{{detailsInfo.recommendCount}}</text>
						<text class="name">推荐</text>
					</view>
					<view class="num-item" @click="tracePlot()">
						<text class="num">{{detailsInfo.trajectoryCount}}</text>
						<text class="name">轨迹</text>
					</view>
					<view class="num-item" @click="monthlyStar()">
						<text class="num">{{detailsInfo.starCount}}</text>
						<text class="name">月度之星</text>
					</view>
				</view>
				<view class="medal">
					<view class="title space-between-flex" @click="medalList">
						<text>勋章</text>
						<text class="medal-num">共获得{{medalAllList.length}}枚勋章<uni-icons type="right" size="32rpx" color="#999"></uni-icons></text>
					</view>
					<view class="list">
						<view class="medal-all" :class="{'pc-scroll': !isMobile}">
							<view class="medal-item" v-for="item in medalAllList" :key="item.id" @click="showMedal(item)">
								<image src="/static/user/medal.png" mode="aspectFill"></image>
								<text>{{item.medal_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<wpp-tab :tabs="tabList" :active-index="activeIndex" @change="changeTab"></wpp-tab>
			<view v-if="activeIndex == 1" class="original-list">
				<content-recommend :on-show="changeFlag" :account-id="stuAccountId" :active-tab="2" :on-reach-bottom="reachBottom"></content-recommend>
			</view>
			<view class="example" v-show="activeIndex==2">
				<view class="example-details" v-if="exampleInfo.id || exampleTask&&exampleTask.length>0">
					<view class="ce-box" v-if="exampleInfo.id">
						<view class="ex-name ce-item">
							<text class="name">名 字</text>
							<text class="value">{{exampleInfo.name}}</text>
						</view>
						<view class="ce-item" v-if="exampleInfo.characterType>0">
							<text class="name">属 性</text>
							<text class="value">{{exampleInfo.characterType==1?'现实人物':'虚拟人物'}}</text>
						</view>
						<view class="ex-image ce-item">
							<text class="name">图 片</text>
							<view class="imgs">
								<image :src="exampleInfo.pictureUrl" mode="aspectFill" @click="viewImage(exampleInfo.pictureUrl)"></image>
							</view>
						</view>
						<view class="reason-item" v-if="exampleInfo.reason&&JSON.parse(exampleInfo.reason).length>0">
							<text class="name">选择理由</text>
							<view class="list">
								<view class="ri-item" v-for="(item, i) in JSON.parse(exampleInfo.reason)" :key="i">
									<text class="tag">{{i+1}}</text>
									{{item}}
								</view>
								
							</view>
						</view>
						<view class="ex-desc">
							<text class="name">基本特征</text>
							<view class="brief-box">
								{{exampleInfo.brief}}
							</view>
						</view>
						
					</view>
					<view class="ce-box ex-task ce-item" v-if="exampleTask.length>0">
						<text class="name">任务</text>
						<view class="list">
							<view class="select-picker">
								<view class="csu-item">
									<text>{{taskStartDate}}</text>
								</view>
								<view class="" style="margin: 0 20px; color: #D7D7D7">—</view>
								<view class="csu-item">
									<text>{{taskEndDate}}</text>
								</view>
							</view>
							<view class="item" v-for="(task, index) in exampleTask" :key="index">
								<text>{{task.content}}</text>
								<text class="state" v-if="task.state==1">审核中</text>
							</view>
						</view>
					</view>
				</view>
				<view class="example-details" v-else>该同学暂未绑定重要他人</view>
			</view>
			<week-task
				v-if="activeIndex==3"
				:account-id="stuAccountId"
				:student-id="`${studentInfo.id}`"
				:on-reach-bottom="reachBottom"
				></week-task>
			<view v-if="activeIndex==4">
				<course-list :student-id="`${studentInfo.id}`" :on-reach-bottom="reachBottom"></course-list>
			</view>
		</view>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="seeMedal" @click="seeMedal=false">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="seeMedal">
			<view class="point-prize popup-top" v-if="currentInfo.id">
				<view class="point-content">
					<text class="time">
						{{currentInfo.add_time.split(' ')[0]}}
					</text>
					<view class="point">
						{{currentInfo.medal_name}}
					</view>
					<view class="tips">
						<text>恭喜取得勋章
请再接再厉</text>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
	import wppTab from '@/components/wpp-tab.vue'
	import contentRecommend from '../recommend/content-recommend.vue'
	import courseList from '@/components/course-list.vue'
	import weekTask from  './components/week-task.vue'
	export default {
		components: {
			wppTab,
			contentRecommend,
			courseList,
			weekTask
		},
		data(){
			return {
				isMobile: true, // isMobile是否是手机 true是手机，false是pc
				userInfo: {}, // 当前登录的用户信息
				activeIndex: 1, // 对应tabList value
				studentInfo: {}, // 访问的用户信息
				tabList: [{value: 1, table: '已发动态'}, {value: 2, table: '重要他人'}, {value: 3, table: '任务信息'}, {value: 4, table: '学习课程'}],  
				exampleInfo: {}, // 榜样信息
				exampleTask: [], // 榜样任务
				taskStartDate: '', // 榜样任务开始时间
				taskEndDate: '', // 榜样任务结束时间
				detailsInfo: {}, // 详情信息
				stuAccountId: '', // 学生的账号ID
				reachBottom: 1, // 触发底部时触发参数
				campusPage: 1, // 已发动态 页码
				changeFlag: 1, // 值改变时数据更新
				medalAllList: [], // 勋章列表
				seeMedal: false, // 勋章弹窗
				currentInfo: {} // 当前查看的勋章信息
			}
		},
		onShow(){
			// #ifdef H5
			if (navigator.userAgent.indexOf('Mobile') === -1) {  
				this.isMobile = false  
			}  
			// #endif
			this.changeFlag ++
		},
		onLoad(options) {
			this.stuAccountId = options.id;
			this.getDetails()
			this.getUserMedalList()
		},
		onReachBottom(){
			this.reachBottom ++
			
		},
		methods: {
			// 切换选项
			changeTab(val){
				this.activeIndex = val;
				// 1.已发动态 2.重要他人 3.任务信息 4.学习课程 
				if(val == 1){
					this.changeFlag ++
				}
			},
			// 获取勋章列表
			getUserMedalList(){
				this.api.get('activity/getUserMedalList', {
					accountId: this.stuAccountId
				}).then(res => {
					if(res.data.state == 'ok') {
						this.medalAllList = res.data.medalUserList;
					}
				})
			},
			// 获取用户信息
			getDetails(){
				this.api.get('user/findUserDetails', {
					accountId: this.stuAccountId
				}).then(res=>{
					if(res.data.state != 'ok') return;
					this.userInfo = getApp().globalData.userInfo;
					let data = res.data;
					this.detailsInfo = data;
					this.studentInfo = Object.assign(data.idInfo, data.student);
					this.getBindExample()
				})
				
			},
			// 获取榜样
			getBindExample(){
				this.api.get('sExample/findBindExample',{
					studentId: this.studentInfo.id
				}).then(res=>{
					if(res.data.state == 'ok'){
						let info = res.data.example || {};
						let state = info.state==1||info.state==2 ? 1 : info.state==3||info.state==5? 3 : 2;
						// 1审核中，2通过， 3拒绝
						if(state == 2){
							// 榜样审核通过时，在个人主页显示榜样信息
							info.pictureUrl = this.api.xiaodeObsUrl + info.pictureUrl;
							this.exampleInfo = info;
						}
						
					}
				})
				this.getExampleTask()
			},
			// 获取榜样任务
			getExampleTask(){
				this.api.get('sExample/getExampleTask', {
					studentId: this.studentInfo.id
				}).then(res=>{
					let tasks = res.data.setList.reverse();
					this.exampleTask = tasks;
					let item = tasks[0];

					let endTime = item.deadline || '', 
						startTime = item.addTime;
					// 判断任务的结束时间是否存在
					if(endTime){
						this.taskEndDate = endTime.split(' ')[0];
						this.taskStartDate = startTime.split(' ')[0]
					}
				})
			},
			// 去往聊天页面
			chatPage(item){
				let url = item.avatarUrl||'';
				uni.navigateTo({
					url: `/pages/chatSystem/chat-page?toUserType=${item.userType}&id=${item.id}&accountId=${item.accountId}&name=${item.name}&avatarUrl=${url}`// 使用用户id
				})
			},
			// 预览图片
			viewImage(url){
				uni.previewImage({
					urls: [url],
					current: 1
				});
			},
			// 勋章详情
			medalList(){
				uni.navigateTo({
					url: `/pages/student/medal-list?accountId=${this.stuAccountId}`
				})
			},
			// 轨迹图
			tracePlot(){
				uni.navigateTo({
					url: `/pages/student/trace-plot?accountId=${this.stuAccountId}`
				})
			},
			// 推荐页
			recommendAaa(){
				uni.navigateTo({
					url: `/pages/student/recommendAaa?accountId=${this.stuAccountId}`
				})
			},
			// 积分页面
			pointsDetails(){
				uni.navigateTo({
					url: `/pages/student/points-details?accountId=${this.stuAccountId}`
				})
			},
			// 月度之星页面
			monthlyStar(){
				uni.navigateTo({
					url: `/pages/student/monthly-star?accountId=${this.stuAccountId}`
				})
			},
			showMedal(item){
				this.currentInfo = item
				this.seeMedal = true
			}
		}
	}
</script>
<style lang="less" scoped>
	// 27px 是手机上面显示时间的 盒子的高度
	.stu-bg{
		position: relative;
		// #ifdef APP-PLUS
		padding-top: 27px;
		height: 386rpx;
		// #endif
		// #ifdef H5
		height: calc(386rpx - 27px);
		// #endif
		box-sizing: border-box;
		.page-bg{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	}
	
	.name-head{
		position: relative;
		// #ifdef H5
		margin-top: calc(160rpx - 27px - 44px);
		// #endif
		// #ifdef APP-PLUS
		margin-top: calc(160rpx - 44px);
		// #endif
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			
		}
		.head{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 6rpx solid rgba(255, 255, 255, .5);
		}
		.xiaoxi{
			width: 86rpx;
			height: 86rpx;
		}
		.name-student-no{
			margin-top: 7rpx;
			margin-left: 26rpx;
		}
		.name{
			color: #333;
			font-size: 34rpx;
			line-height: 48rpx;
			font-weight: bold;
		}
		.student-no{
			margin-top: 10rpx;
			display: block;
			font-size: 20rpx;
			line-height: 28rpx;
			color: #666666;
		}
	}
	.st-content{
		position: relative;
		// #ifdef H5
		margin-top: -66rpx;
		// #endif
		
		// #ifdef APP-PLUS
		margin-top: calc(-66rpx + 27px);
		// #endif
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		min-height: 500rpx;
	}
	.info{
		border-radius: 32rpx 32rpx 0 0;
		padding: 36rpx 24rpx 28rpx;
		border-bottom: 20rpx solid #F9F9F9;
		.avatar-head{
			padding: 15rpx;
			background-color: #fff;
			margin-right: 24rpx;
			border-radius: 80rpx;
			font-size: 0;
		}
		.number{
			display: flex;
			justify-content: space-between;
			color: #7f7f7f;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #EEEEEE;
			.num{
				color: #333;
				line-height: 64rpx;
				font-weight: bold;
				font-size: 50rpx;
			}
		}
		.num-item{
			width: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			.name{
				color: #999;
				font-size: 26rpx;
				line-height: 37rpx;
			}
		}
	}
	// 勋章
	.medal{
		margin-top: 56rpx;
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
		.medal-num{
			color: #999999;
			font-weight: normal;
		}
		.list{
			margin-top: 26rpx;
			// height: 178rpx;
		}
		.medal-all{
			display: flex;
			align-items: flex-start;
			overflow-x: scroll;
		}
		.pc-scroll{
			height: calc(178rpx + 5px);
			&:hover{
				&::-webkit-scrollbar {
					display: block;
					width: 5px;
					height: 5px;
				}

				&::-webkit-scrollbar-track-piece {
					background-color: transparent;
					border-radius: 6px;
					width: 0px;
					height: 0;
				}

				&::-webkit-scrollbar-thumb:horizontal {
					width: 5px;
					width: 5px;
					background-color: rgba(125, 125, 125, 0.5);
					border-radius: 6px;
				}
			}
			
		}
		.medal-item{
			width: 130rpx;
			min-width: 130rpx;
			margin-right: 10rpx;
			padding: 32rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 68rpx;
				height: 68rpx;
			}
			text{
				margin-top: 10rpx;
				font-size: 26rpx;
				line-height: 37rpx;
				
			}
		}
	}
	.original-list{
		margin-top: 44rpx;
		padding: 0 8rpx;
	}
	.example{
		image{
			width: 708rpx;
			height: 744rpx;
		}
	}
	.example-details{
		padding: 32rpx 45rpx;
		.state-tips{
			display: block;
			text-align: center;
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		
		.ce-box{
			padding: 24rpx 0;
			margin-bottom: 32rpx;
		}
		.name{
			width: 156rpx;
			white-space: nowrap;
			color: #000;
			font-size: 28rpx;
		}
		.ce-item{
			display: flex;
			align-items: stretch;
			margin-bottom: 24rpx;
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 12rpx;
			.name{
				letter-spacing: .8em;
				padding-bottom: 12rpx;
			}
			.value, .imgs{
				width: calc(100% - 156rpx);
			}
			.imgs{
				font-size: 0;
				
				image{
					width: 90rpx;
					height: 90rpx;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					margin-top: 24rpx;
				}
			}
			&.ex-image{
				padding-bottom: 24rpx;
				image{
					margin: 0;
				}
			}
		}
		
		.ex-name{
			align-items: center;
		}
		.reason-item{
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #f2f2f2;
			.list{
				margin-top: 32rpx;
			}
			.ri-item{
				// display: inline-block;
				margin-right: 32rpx;
				margin-bottom: 12rpx;
			}
			.tag{
				display: inline-block;
				width: 46rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				background: #55acee;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #fff;
				margin-right: 24rpx;
				vertical-align: text-top;
			}
		}
		.ex-desc{
			margin-top: 32rpx;
			.brief-box{
				margin-top: 16rpx;
			}
		}
		.ex-task{
			&.ce-item{
				border: none;
			}
			.name{
				letter-spacing: 0em;
				line-height: 80rpx;
				width: 100rpx;
			}
			.select-picker{
				// border-bottom: 1px solid #dcdfe6;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.csu-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40px;
					border-bottom: 1px solid #dcdfe6;
					font-size: 14px;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.date-x-icon{
					min-width: 25px;
					width: 25px;
					height: 25px;
				}
				.uni-date__x-input{
					padding: 0;
				}
			}
			.list{
				width: 100%;
			}
			.item{
				border-bottom: 2rpx solid #f2f2f2;
				// height: 70rpx;
				padding: 14rpx 0;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				input{
					min-width: 66%;
					&.input-placeholder{
						color: #999;
					}
				}
				.state{
					margin-left: 24rpx;
					white-space: nowrap;
					color: #55acee;
					font-size: 24rpx;
				}
			}
		}
	}
	.space-between-flex{
		display: flex;
		justify-content: space-between;
	}
	
	.point-prize{
		// position: absolute;
		background-color: transparent;
		width: 560rpx;
		height: 745rpx;
		background-image: url(~@/static/mbti/prize-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0;
		
	}
	.point-content{
		position: absolute;
		width: 100%;
		top: 270rpx;
		text-align: center;
		.time{
			color: #fff;
		}
	}
	.point{
		margin-top: 112rpx;
		color: #FA7F45;
		font-size: 48rpx;
		font-weight: bold;
	}
	.tips{
		white-space: pre-line;
		margin-top: 76rpx;
		color: #666666;
		font-size: 28rpx;
		line-height: 42rpx;
		
	}
</style>